<template>
  <PublicLoading v-if="loading.mounted" />
  <div v-else class="dt-main-tabs-content">
    <div class="dt-content-main">
      <div class="dt-content-head">
        <div class="dt-content-head-tab">
          <div class="dt-head-title">
            <div class="dt-head-breadcrumb" @click.stop="goBack">
              <i class="el-icon-arrow-left"></i>
              <span>返回</span>
              <em>|</em>
            </div>
            <span>管理我的模板</span>
          </div>
        </div>
      </div>
      <div class="dt-content-page custom-table" :class="{ 'empty': templateList.length==0}">
        <PublicEmpty v-if="templateList.length==0" :ishowImage="true" />
        <div v-else>
          <el-table :data="templateList" style="width: 100%" :border="true">
            <el-table-column prop="" label="序号" width="80">
              <template slot-scope="scope">
                <span>{{scope.$index+1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="templateName" label="模版名称" min-width="360">
              <template slot-scope="scope">
                <span>{{scope.row.templateName||'--'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="保存时间" min-width="360">
              <template slot-scope="scope">
                <span>{{scope.row.createTime||'--'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" min-width="629">
              <template slot-scope="scope">
                <div v-if="scope.row.templateType==1">
                  <div class="dt-operate" v-if="!scope.row.isRemarkEdit">
                    <span v-if='scope.row.remark'>{{scope.row.remark}}</span>
                    <span v-else style="color:#909399;">暂无</span>
                    <el-button type="text" @click="openRemark(scope.$index, scope.row)">编辑</el-button>
                  </div>
                  <div v-else class="dt-operate-edit">
                    <el-input v-model.trim="scope.row.remark" placeholder="请输入备注" maxlength="20" size="mini" style="width:320px;"></el-input>
                    <el-button type="primary" icon="el-icon-check" @click="submitRemark(scope.$index, scope.row)"></el-button>
                    <el-button type="primary" icon="el-icon-close" @click="closeRemark(scope.$index, scope.row)"></el-button>
                  </div>
                </div>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="操作" min-width="361">
              <template slot-scope="scope">
                <div v-if="scope.row.templateType==1">
                  <el-button type="text" @click="goEdit(scope.row.id,scope.$index)">编辑</el-button>
                  <el-button type="text" @click="openDelete(scope.row.id, scope.$index)">删除</el-button>
                </div>
                <div v-else>--</div>
              </template>

            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      loading: { mounted: false },

      templateList: []
    }
  },
  computed: {
    query() {
      return this.$tools.getQuery(this)
    }
  },
  methods: {
    showCard() {
      // this.dataCard.isShowCard = true
    },
    goBack() {
      var data = { elTab: '2', rootProjectId: this.query.rootProjectId }
      this.$router.push('/main/#/pm?tab=create&' + this.$qs.stringify(data))
    },
    goEdit(id) {
      var data = { templateId: id, rootProjectId: this.query.rootProjectId }
      this.$router.push('/main/#/pm?tab=edit-template&' + this.$qs.stringify(data))
    },
    detele(id, index) {
      var data = [
          {
            userId: this.uid,
            templateId: id
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/template/deleteTemplate'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.templateList.splice(index, 1)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              console.log(data.message)
              this.$message({
                message: data.message,
                type: 'warning'
              })
            }
          })
        })
        .catch((error) => {})
    },
    openDelete(id, index) {
      this.$confirm('是否删除该模板？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'dt-button-cancle is-plain',
        type: 'warning'
      })
        .then(() => {
          this.detele(id, index)
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
    },
    openRemark(index) {
      this.templateList[index].isRemarkEdit = 1
    },
    submitPostRemark(index, row) {
      var data = [
          {
            userId: this.uid,
            templateId: row.id,
            remark: row.remark
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/template/setTemplateRemark'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.templateList[index].isRemarkEdit = 0
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    submitRemark(index, row) {
      this.submitPostRemark(index, row)
    },
    closeRemark(index) {
      this.templateList[index].isRemarkEdit = 0
    },
    getTemplateList() {
      var data = [
          {
            userId: this.uid,
            page: 1,
            pagesize: 99999
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/template/templateList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.templateList = data.data.items.map((item) => {
                return {
                  ...item,
                  isRemarkEdit: 0
                }
              })
            } else {
              this.templateList = []
            }
          })
        })
        .catch((error) => {})
    }
  },
  mounted() {
    this.getTemplateList()
  }
}
</script>
<style scoped>
/* .dt-operate-edit, */
.dt-operate {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.dt-line-height {
  line-height: 22px;
}
.custom-table {
  flex: 1;
}
.custom-table.empty {
  display: flex;
  justify-content: center;
}

.custom-table >>> .el-button {
  margin-left: 6px;
}
.dt-operate-edit >>> .el-button {
  width: 26px;
  height: 26px;
}

/* 表格 */
.custom-table {
  padding: 14px;
}
.custom-table.empty {
  display: flex;
  justify-content: center;
}
.custom-table >>> .el-table .el-table__cell {
  padding: 8px 0px;
}
.custom-table >>> .el-table__header th {
  background-color: #fafafa;
}
.custom-table >>> .el-button {
  padding: 0px;
}
.el-button--text {
  font-size: 14px;
}
</style>